import React, { useState } from 'react';
import { Tabs, Button, Toast, Dialog, Tag } from 'antd-mobile';
import { SearchOutline, LocationOutline } from 'antd-mobile-icons'
// import { useNavigate } from "react-router-dom";
import '../styles/myAppointments.scss'
import NavHeader from '../components/NavHeader'
import TabBarFooter from '../components/TabBarFooter';

// 预约状态
type AppointmentStatus = '待就诊' | '已完成' | '已取消' 

// 预约信息接口
interface Appointment {
  id: string;
  hospital: string;
  doctor: {
    name: string;
    department: string;
    title: string;
    avatar: string;
  };
  date: string;
  time: string;
  day: string;
  patient: {
    name: string;
    age: number;
    gender: '男' | '女';
  };
  status: AppointmentStatus;
  price: number;
}

const MyAppointmentsPage: React.FC = () => {
  // const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<string>('待就诊');

  // 模拟预约数据
  const appointments: Appointment[] = [
    {
      id: '1',
      hospital: '上海市第一人民医院',
      doctor: {
        name: '张三',
        department: '内科',
        title: '主任医师',
        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      },
      date: '2023-07-20',
      day: '星期一',
      time: '10:00',
      patient: {
        name: '李四',
        age: 35,
        gender: '男',
      },
      status: '待就诊',
      price: 150,
    },
    {
      id: '2',
      hospital: '上海市第一人民医院',
      doctor: {
        name: '李医生',
        department: '外科',
        title: '主任医师',
        avatar: '/images/doctor-avatar.png',
      },
      date: '2023-07-21',
      day: '星期二',
      time: '10:30',
      patient: {
        name: '张大山',
        age: 30,
        gender: '男',
      },
      status: '待就诊',
      price: 120,
    },
    {
      id: '3',
      hospital: '协和医院',
      doctor: {
        name: '王医生',
        department: '内分泌科',
        title: '副主任医师',
        avatar: '/images/doctor-avatar.png'
      },
      date: '2023-07-22',
      day: '星期三',
      time: '11:00',
      patient: {
        name: '张三',
        age: 35,
        gender: '男',
      },
      status: '已完成',
      price: 100,
    },
    {
      id: '4',
      hospital: '上海市第一人民医院',
      doctor: {
        name: '李医生',
        department: '外科',
        title: '主任医师',
        avatar: '/images/doctor-avatar.png',
      },
      date: '2023-07-23',
      day: '星期四',
      time: '11:30',
      patient: {
        name: '张珊',
        age: 35,
        gender: '女',
      },
      status: '已取消',
      price: 150,
    },
  ]

  // 按状态筛选预约
  const filteredAppointments = appointments.filter(
    appointment => appointment.status === activeTab
  )

  // 处理返回按钮点击
  // const handleBack = () => {
  //   navigate('/home');
  // }

  // 处理取消预约按钮点击
  const handleSearch = () => {
    Toast.show('搜索功能开发中...');
    return;
  }

  // 处理取消预约按钮点击
  const handleCancelAppointment = (id?: string) => {
    Dialog.confirm({
      title: '取消预约',
      content: '确定要取消该预约吗？',
      onConfirm: () => {
        if (id) {
          Toast.show({
            icon: 'success',
            content: '预约已取消',
          });
          // 实际应用中这里应该调用API取消预约，然后刷新列表
          return;
        } else {
          Toast.show({
            content: '预约ID无效',
          })
        }
      }
    })
  }

  // 修复其他Toast调用
  const handleReview = () => {
    Toast.show('评价功能开发中...')
    return;
  }

  const handleRebook = () => {
    Toast.show('重新预约功能开发中...')
    return;
  }

  // 处理导航按钮点击
  const handleNavigate = (hospital: string) => {
    Toast.show({
      content: `导航前往${hospital}`,
      position: 'bottom',
    })
    // 实际应用中这里应该跳转到地图或导航功能
  }

  // 根据状态获取标签颜色
  const getStatusTagColor = (status: AppointmentStatus): string => {
    switch (status) {
      case '待就诊':
        return '#1677ff'; // 蓝色
      case '已完成':
          return '#52c41a'; // 绿色
      case '已取消':
          return '#999999'; // 灰色
      default:
          return '#1677ff';
    }
  }

  // 渲染预约项
  const renderAppointmentItem = (appointment: Appointment) => (
    <div className="appointment-item" key={appointment.id}>
      <div className="hospital-row">
        <div className="hospital-name">{appointment.hospital}</div>
        <Tag color={getStatusTagColor(appointment.status)} className="status-tag">{appointment.status}</Tag>
      </div>

      <div className="doctor-info">
        <div className="avatar">
          <img src={appointment.doctor.avatar} alt="医生头像" />
        </div>
        <div className="info-content">
          <div className="doctor-name">
            {appointment.doctor.name} · {appointment.doctor.department}
          </div>
          <div className="doctor-title">{appointment.doctor.title}</div>
          <div className="appointment-time">
            {appointment.date} ({appointment.day}) {appointment.time}
          </div>
        </div>
        <div className="pric">¥ {appointment.price}</div>
      </div>

      <div className="patient-row">
        <div className="patient-info">
          就诊人: {appointment.patient.name}
        </div>
        <div className="action-buttons">
          {appointment.status === '待就诊' && (
            <>
              <Button size="mini" className="cancel-btn" onClick={() => handleCancelAppointment(appointment.id)}>取消预约</Button>
              <Button size="mini" className="navigate-btn" onClick={() => handleNavigate(appointment.hospital)}>
                <LocationOutline />
                <span>导航前往</span>
              </Button>
            </>
          )}
          {appointment.status === '已完成' && (
            <Button size="mini" className="review-btn" onClick={handleReview}>评价就诊</Button>
          )}
          {appointment.status === '已取消' && (
            <Button size="mini" className="rebook-btn" onClick={handleRebook}>重新预约</Button>
          )}
        </div>
      </div>
    </div>
  );

  return (
    <div className="my-appointments-page">
      {/* 使用公共顶部导航栏组件 */}
      <NavHeader 
        title="我的预约"
        backPath='/home'
        right={<SearchOutline fontSize={18} onClick={handleSearch} />}
      />

      {/* 预约状态标签页 */}
      <Tabs 
        className='appointment-tabs'
        activeKey={activeTab}
        onChange={key => setActiveTab(key)}
      >
        <Tabs.Tab title="待就诊" key="待就诊" />
        <Tabs.Tab title="已完成" key="已完成" />
        <Tabs.Tab title="已取消" key="已取消" />
      </Tabs>

      {/* 预约列表 */}
      <div className="appointments-list">
        {filteredAppointments.length > 0 ? (
          filteredAppointments.map(renderAppointmentItem)
        ) : (
          <div className="empty-state">
            <div className="empty-icon">📅</div>
            <div className="empty-text">暂无{activeTab}预约</div>
          </div>
        )}
      </div>

      {/* 使用公共底部标签栏组件 */}
      <TabBarFooter activeKey='appointments' />
    </div>
  )
}

export default MyAppointmentsPage;